import Progress from "@/views/dataAsset/components/Progress";
import Title from "@/views/dataAsset/components/Title";
import { useHouseData } from "@/views/dataAsset/helpers/left";
import { FC, memo } from "react";

const LeftCardOne: FC = memo(() => {
  const [houseData, houseTotal] = useHouseData()

  return (
    <div className="w-full h-450px bg-[#fff] rounded-4px mb-16px">
      <Title name="房产数据采集总量" isUnit={false} />
      <div className="flex flex-col overflow-y-auto" style={{ height: `calc(100% - 73px)` }}>
        {houseData.map((item, index) => (
          <Progress
            key={index}
            indexText={`Top.${index + 1}`}
            index-text-bg-color="linear-gradient(180deg, #4264E9 0%, rgba(73,107,235,0.34) 100%)"
            index-text-round="2px"
            title={item.name}
            cur-num={item.count}
            total-num={houseTotal}
            progress-wrap-bg-color="#E3EBF9"
            progress-bg-color="linear-gradient(90deg, #3666FF 0%, #6FB8FE 100%)"
          />
        ))}
      </div>
    </div>
  )
})

export default LeftCardOne